<template>
    <div class="bg-light">
      <!-- 头部 -->
      <div class="header d-flex align-items-center">
        <router-link to="/english/exam" class="text-dark">
          <i class="bi bi-chevron-left fs-4"></i>
        </router-link>
        <h5 class="mb-0 mx-auto">2019年 阅读 Text1</h5>
        <i class="bi bi-bookmark text-muted"></i>
      </div>

      <!-- 阅读工具栏 -->
      <div class="reading-tools d-flex justify-content-around">
        <button class="tool-btn" id="translateBtn" @click="toggleTranslation">
          <i class="bi bi-translate"></i> 全文翻译
        </button>
        <button class="tool-btn" id="difficultBtn" @click="toggleDifficult">
          <i class="bi bi-braces"></i> 长难句解析
        </button>
        <button class="tool-btn" id="vocabBtn" @click="toggleVocab">
          <i class="bi bi-book"></i> 生词本
        </button>
      </div>

      <!-- 阅读内容 -->
      <div class="reading-content">
        <div class="paragraph">
          <span class="paragraph-number">[1]</span>
          <div class="english-text">
            A "<span class="new-word" data-word="bleisure" data-phonetic="/ˈbleʒə/" data-meaning="商务休闲，商旅融合">bleisure</span>" trip is a journey which combines
            <span class="new-word" data-word="business" data-phonetic="/ˈbɪznəs/" data-meaning="n. 商务，生意；adj. 商务的">business</span> and
            <span class="new-word" data-word="leisure" data-phonetic="/ˈleʒə/" data-meaning="n. 休闲，闲暇">leisure</span>.
              Many people add a few days to a business trip to explore their destination, or take their partner with them.
            The practice has become so common that some travel companies use it as a marketing tool.
          </div>
          <div class="chinese-text">
            "商旅融合"之旅是将商务和休闲结合在一起的旅行。许多人会在商务旅行中额外增加几天时间来探索目地，或带上伴侣同行。这种做法已变得如此普遍，以至于一些旅游公司将其用作营销工具。
          </div>
          <div class="sentence-analysis" id="analysis-1">
            <!-- 解析内容会动态插入到这里 -->
          </div>
        </div>

        <div class="paragraph">
          <span class="paragraph-number">[2]</span>
          <div class="english-text">
              The rise of bleisure travel reflects changes in the way we work.
              Technology means that many people can work remotely, while changing attitudes toward work-life balance mean that employers are more willing to accommodate personal time during business trips.
          </div>
          <div class="chinese-text">
            商旅融合旅行的兴起反映了我们工作方式的变化。科技意味着许多人可以远程工作，而对工作与生活平衡态度的改变也意味着雇主更愿意在商务旅行期间适应个人时间的需求。
          </div>
          <div class="sentence-analysis" id="analysis-2">
            <!-- 解析内容会动态插入到这里 -->
          </div>
        </div>

      </div>

      <!-- 题目部分 -->
      <div class="question-section">
        <div class="question">
          <p><strong>21. According to the passage, what is "bleisure" travel?</strong></p>
          <a href="#" class="option" @click.prevent="selectAnswer(21, 'A')">
            A. A type of travel that combines business and leisure activities
          </a>
          <a href="#" class="option" @click.prevent="selectAnswer(21, 'B')">
            B. A marketing strategy used by travel companies
          </a>
          <a href="#" class="option" @click.prevent="selectAnswer(21, 'C')">
            C. A new way of remote working
          </a>
          <a href="#" class="option" @click.prevent="selectAnswer(21, 'D')">
            D. A trend in work-life balance
          </a>
        </div>

        <div class="question">
          <p><strong>22. What has contributed to the rise of bleisure travel?</strong></p>
          <a href="#" class="option" @click.prevent="selectAnswer(22, 'A')">
            A. Increased travel company marketing
          </a>
          <a href="#" class="option" @click.prevent="selectAnswer(22, 'B')">
            B. Changes in technology and work attitudes
          </a>
          <a href="#" class="option" @click.prevent="selectAnswer(22, 'C')">
            C. Lower travel costs
          </a>
          <a href="#" class="option" @click.prevent="selectAnswer(22, 'D')">
            D. Better transportation options
          </a>
        </div>
      </div>

      <!-- 底部工具栏 -->
      <div class="bottom-tools">
        <div>
          <button class="btn btn-outline-primary btn-sm me-2">上一篇</button>
          <button class="btn btn-outline-primary btn-sm">下一篇</button>
        </div>
        <div>
          <button class="btn btn-primary" @click="goToAnalysis">答案解析</button>
        </div>
      </div>
    </div>
  </template>

  <script>
  import http from '@/router/http'

  export default {
    name: 'EnglishReadingTextView',
    data() {
      return {
        selectedAnswers: {},
        wordTooltip: null,
        vocabList: [], // 生词本列表
        currentWord: {
          word: '',
          phonetic: '',
          meaning: '',
          isNewWord: false,
          collected: false
        },
        showVocab: false, // 添加这个来跟踪生词本模式状态
      }
    },
    methods: {
      toggleTranslation() {
        const btn = document.getElementById('translateBtn')
        btn.classList.toggle('active')

        const chineseTexts = document.querySelectorAll('.chinese-text')
        chineseTexts.forEach(text => {
          if (btn.classList.contains('active')) {
            text.style.display = 'block'
            setTimeout(() => text.classList.add('show'), 10)
          } else {
            text.classList.remove('show')
            setTimeout(() => text.style.display = 'none', 300)
          }
        })
      },
      async toggleDifficult() {
        const btn = document.getElementById('difficultBtn')
        btn.classList.toggle('active')

        if (btn.classList.contains('active')) {
          try {
            // 获取整篇文章的文本
            const articleText = Array.from(document.querySelectorAll('.english-text'))
              .map(el => el.textContent.trim())
              .join('\n\n');

            const response = await http.post('/student/ai/english/long_sentence_analyze', 
              { text: articleText }
            );

            if (response.data.code === 1) {
              const analysisData = response.data.response;
              
              // 获取原句
              const originalSentence = analysisData.句子解析.原句;
              
              // 在文章中查找并高亮对应的句子
              document.querySelectorAll('.paragraph').forEach((paragraph, index) => {
                const textDiv = paragraph.querySelector('.english-text');
                
                if (textDiv && textDiv.textContent.includes(originalSentence)) {
                  // 获取句子中的所有单词
                  const sentenceWords = originalSentence.split(/\s+/);
                  let currentIndex = 0;
                  let spans = [];
                  
                  // 收集所有的 clickable-word spans
                  textDiv.querySelectorAll('.clickable-word').forEach(span => {
                    if (currentIndex < sentenceWords.length && 
                        span.textContent.replace(/[.,!?;:"']/g, '') === sentenceWords[currentIndex].replace(/[.,!?;:"']/g, '')) {
                      spans.push(span);
                      currentIndex++;
                    } else {
                      currentIndex = 0;
                      spans = [];
                    }
                    
                    // 如果找到了完整的句子
                    if (spans.length === sentenceWords.length) {
                      // 创建难句span
                      const difficultSpan = document.createElement('span');
                      difficultSpan.className = 'difficult-sentence highlight';
                      difficultSpan.setAttribute('data-sentence-id', index + 1);
                      
                      // 将所有单词span移动到难句span中
                      spans.forEach(wordSpan => {
                        difficultSpan.appendChild(wordSpan.cloneNode(true));
                        if (wordSpan !== spans[spans.length - 1]) {
                          difficultSpan.appendChild(document.createTextNode(' '));
                        }
                      });
                      
                      // 替换原始spans
                      spans[0].parentNode.insertBefore(difficultSpan, spans[0]);
                      spans.forEach(span => span.remove());
                      
                      // 只在当前段落显示分析结果
                      const analysisDiv = paragraph.querySelector('.sentence-analysis');
                      if (analysisDiv) {
                        analysisDiv.innerHTML = `
                          <div class="analysis-content">
                            ${Object.entries(analysisData).map(([key, value]) => `
                              <div class="analysis-section">
                                <p><strong>${key}</strong></p>
                                <div class="analysis-value">
                                  ${this.renderJsonValue(value)}
                                </div>
                              </div>
                            `).join('')}
                          </div>
                        `;
                        analysisDiv.style.display = 'block';
                        setTimeout(() => analysisDiv.classList.add('show'), 10);
                      }
                      
                      currentIndex = 0;
                      spans = [];
                    }
                  });
                }
              });
            }
          } catch (error) {
            console.error('Analysis request failed:', error);
          }
        } else {
          // 移除所有高亮，保持单词的可点击性
          document.querySelectorAll('.difficult-sentence').forEach(el => {
            const wordSpans = Array.from(el.querySelectorAll('.clickable-word'));
            const fragment = document.createDocumentFragment();
            
            wordSpans.forEach((span, index) => {
              fragment.appendChild(span);
              if (index < wordSpans.length - 1) {
                fragment.appendChild(document.createTextNode(' '));
              }
            });
            
            el.parentNode.insertBefore(fragment, el);
            el.remove();
          });
          
          // 隐藏所有分析结果
          document.querySelectorAll('.sentence-analysis').forEach(el => {
            el.classList.remove('show');
            setTimeout(() => el.style.display = 'none', 300);
          });
        }
      },
      toggleVocab() {
        const btn = document.getElementById('vocabBtn')
        btn.classList.toggle('active')
        this.showVocab = !this.showVocab // 添加这行来跟踪生词本模式状态
        document.querySelectorAll('.new-word').forEach(el => {
          el.classList.toggle('highlight')
        })
      },
      selectAnswer(questionId, option) {
        const options = document.querySelectorAll(`.question:nth-child(${questionId - 20}) .option`)
        options.forEach(opt => opt.classList.remove('selected'))
        event.target.classList.add('selected')
        this.selectedAnswers[questionId] = option
      },
      goToAnalysis() {
        const examTitle = document.querySelector('.header h5').textContent.trim()
        const year = examTitle.match(/\d{4}/)[0]
        const part = examTitle.toLowerCase().split(' ')[2]
        this.$router.push({
          name: 'EnglishReadingAnalysis',
          query: { exam: year, part }
        })
      },
      addToVocab(wordData) {
        const exists = this.vocabList.some(item => item.word === wordData.word)
        if (!exists) {
          this.vocabList.push(wordData)
          // 可以添加本地存储
          localStorage.setItem('vocabList', JSON.stringify(this.vocabList))
        }
      },
      removeFromVocab(word) {
        this.vocabList = this.vocabList.filter(item => item.word !== word)
        localStorage.setItem('vocabList', JSON.stringify(this.vocabList))
      },
      handleWordClick(event, word) {
        let wordData = {}
        if (word.classList.contains('new-word')) {
          // 处理预设的生词
          wordData = {
            word: word.dataset.word,
            phonetic: word.dataset.phonetic,
            meaning: word.dataset.meaning
          }
          this.showWordTooltip(wordData, event)
        } else {
          // 处理普通单词
          const wordText = word.textContent.trim().toLowerCase()
            .replace(/[.,!?;:"']/g, '') // 移除标点符号
          wordData = {
            word: wordText,
            phonetic: '', // 将通过API获取
            meaning: ''   // 将通过API获取
          }
          this.fetchWordTranslation(wordData, event)
        }
      },
      showWordTooltip(wordData, event) {
        if (!this.wordTooltip) {
          this.wordTooltip = document.createElement('div')
          this.wordTooltip.className = 'word-tooltip'
          document.body.appendChild(this.wordTooltip)
        }

        const isCollected = this.vocabList.some(item => item.word === wordData.word)

        this.wordTooltip.innerHTML = `
          <div class="tooltip-header">
            <strong>${wordData.word}</strong>
            <button class="collect-word-btn ${isCollected ? 'collected' : ''}"
                    data-word='${JSON.stringify(wordData)}'>
              ${isCollected ? '已添加' : '添加生词'}
            </button>
          </div>
          ${wordData.phonetic ? `<div>${wordData.phonetic}</div>` : '<div class="loading-phonetic">获取音标中...</div>'}
          ${wordData.meaning ? `<div>${wordData.meaning}</div>` : '<div class="loading-meaning">获取释义中...</div>'}
        `

        const rect = event.target.getBoundingClientRect()
        this.wordTooltip.style.top = `${rect.bottom + window.scrollY + 5}px`
        this.wordTooltip.style.left = `${rect.left}px`
        this.wordTooltip.style.display = 'block'
        this.wordTooltip.classList.add('show')

        // 为收藏按钮添加点击事件
        const collectBtn = this.wordTooltip.querySelector('.collect-word-btn')
        collectBtn.addEventListener('click', (e) => {
          const btnWordData = JSON.parse(e.target.dataset.word)
          const exists = this.vocabList.some(item => item.word === btnWordData.word)

          if (exists) {
            this.removeFromVocab(btnWordData.word)
          } else {
            this.addToVocab(btnWordData)
          }

          e.target.classList.toggle('collected')
          e.target.textContent = exists ? '添加生词' : '已添加'
        })
      },
      async fetchWordTranslation(wordData, event) {
        try {
          // 这里使用有道词典API作为示例，你需要替换成你的实际API
          const response = await fetch(`https://api.example.com/translate?word=${wordData.word}`)
          const data = await response.json()

          wordData.phonetic = data.phonetic || ''
          wordData.meaning = data.meaning || '未找到释义'

          // 更新tooltip内容
          this.showWordTooltip(wordData, event)
        } catch (error) {
          console.error('获取翻译失败:', error)
          wordData.meaning = '获取释义失败'
          this.showWordTooltip(wordData, event)
        }
      },
      // 将文本内容拆分成可点击的单词
      wrapWordsWithSpan(text) {
        // 使用正则表达式匹配单词，保留标点符号
        return text.replace(/([a-zA-Z]+[-'']?[a-zA-Z]*)/g, '<span class="clickable-word">$1</span>')
      },
      async fetchSentenceAnalysis(sentence) {
        try {
          // 获取整篇文章的文本
          const articleText = Array.from(document.querySelectorAll('.english-text'))
            .map(el => el.textContent.trim())
            .join('\n\n');

          const response = await http.post('/student/ai/english/long_sentence_analyze', 
            { text: articleText }  // 发送整篇文章
          );

          if (response.data.code === 1) {
            return response.data.response;
          } else {
            console.error('API returned error:', response.data);
            return null;
          }
        } catch (error) {
          console.error('Request error:', error);
          return null;
        }
      },
      renderJsonValue(value) {
        if (value === null) return 'null';
        if (typeof value === 'undefined') return 'undefined';
        if (typeof value !== 'object') return value;

        return Object.entries(value).map(([key, val]) => `
          <div class="json-item">
            <span class="json-key">${key}:</span>
            <div class="json-value">
              ${Array.isArray(val)
                ? `<div class="json-array">
                    ${val.map(item =>
                      `<div class="json-array-item">
                        ${typeof item === 'object' ? this.renderJsonValue(item) : item}
                      </div>`
                    ).join('')}
                  </div>`
                : typeof val === 'object' && val !== null
                  ? this.renderJsonValue(val)
                  : `<span class="json-primitive">${val}</span>`
              }
            </div>
          </div>
        `).join('');
      },
    },
    mounted() {
      // 从本地存储加载生词本
      const savedVocabList = localStorage.getItem('vocabList')
      if (savedVocabList) {
        this.vocabList = JSON.parse(savedVocabList)
      }

      // 点击页面其他地方关闭 tooltip
      document.addEventListener('click', (e) => {
        if (this.wordTooltip && !e.target.closest('.word-tooltip') && !e.target.closest('.new-word')) {
          this.wordTooltip.style.display = 'none'
          this.wordTooltip.classList.remove('show')
        }
      })

      // 处理所有英文文本内容
      document.querySelectorAll('.english-text').forEach(element => {
        // 跳过已经处理过的 new-word 元素和 difficult-sentence 元素
        const textNodes = Array.from(element.childNodes).filter(node =>
          (node.nodeType === Node.TEXT_NODE ||
           (node.nodeType === Node.ELEMENT_NODE &&
            !node.classList.contains('new-word') &&
            !node.classList.contains('difficult-sentence')))
        )

        textNodes.forEach(node => {
          if (node.nodeType === Node.TEXT_NODE) {
            const span = document.createElement('span')
            span.innerHTML = this.wrapWordsWithSpan(node.textContent)
            node.parentNode.replaceChild(span, node)
          }
        })
      })

      // 修改点击事件监听器
      document.addEventListener('click', async (e) => {
        // 处理单词点击
        const wordElement = e.target.closest('.clickable-word, .new-word')
        if (wordElement) {
          e.preventDefault()
          e.stopPropagation()
          this.handleWordClick(e, wordElement)
          return
        }

        // 处理长难句点击
        const sentence = e.target.closest('.difficult-sentence')
        if (sentence && document.getElementById('difficultBtn').classList.contains('active')) {
          const sentenceId = sentence.dataset.sentenceId
          const analysis = document.getElementById(`analysis-${sentenceId}`)

          if (analysis.classList.contains('show')) {
            analysis.classList.remove('show')
            setTimeout(() => analysis.style.display = 'none', 300)
          } else {
            document.querySelectorAll('.sentence-analysis').forEach(el => {
              el.classList.remove('show')
              el.style.display = 'none'
            })

            // 获取句子文本
            const sentenceText = sentence.textContent.trim()

            // 显示加载状态
            analysis.innerHTML = '<div class="analysis-loading">正在分析中...</div>'
            analysis.style.display = 'block'

            // 调用API获取分析
            const analysisData = await this.fetchSentenceAnalysis(sentenceText)

            if (analysisData) {
              analysis.innerHTML = `
                <div class="analysis-title">长难句解析</div>
                <div class="analysis-content">
                  ${Object.entries(analysisData).map(([key, value]) => `
                    <div class="analysis-section">
                      <p><strong>${key}</strong></p>
                      <div class="analysis-value">
                        ${this.renderJsonValue(value)}
                      </div>
                    </div>
                  `).join('')}
                </div>
              `;
            } else {
              analysis.innerHTML = '<div class="analysis-error">分析失败，请稍后重试</div>';
            }

            setTimeout(() => analysis.classList.add('show'), 10)
          }
        }
      })
    },
    beforeDestroy() {
      // 清理工作
      if (this.wordTooltip && this.wordTooltip.parentNode) {
        this.wordTooltip.parentNode.removeChild(this.wordTooltip)
      }
    }
  }
  </script>

  <style>
  body {
    background-color: #f0f9f9;
  }

  .header {
    padding: 15px;
    background: white;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .reading-tools {
    background: white;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }

  .tool-btn {
    border: none;
    background: none;
    color: #666;
    padding: 5px 15px;
    font-size: 0.9rem;
    cursor: pointer;
  }

  .tool-btn.active {
    color: #40e0d0;
    font-weight: bold;
  }

  .reading-content {
    background: white;
    padding: 20px;
    line-height: 1.8;
  }

  .paragraph {
    margin-bottom: 20px;
    position: relative;
  }

  .paragraph-number {
    position: absolute;
    left: -25px;
    color: #999;
    font-size: 0.8rem;
  }

  .question-section {
    background: white;
    margin-top: 15px;
    padding: 20px;
  }

  .question {
    margin-bottom: 25px;
  }

  .option {
    display: block;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
  }

  .option:hover {
    background: #f8f9fa;
  }

  .bottom-tools {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: white;
    padding: 10px 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .translation-panel {
    display: none;
    background: white;
    padding: 15px;
    margin-top: 10px;
    border-radius: 8px;
    color: #666;
  }

  .chinese-text {
    display: none;
    color: #666;
    background: #f8f9fa;
    padding: 10px 15px;
    margin-top: 10px;
    border-left: 3px solid #40e0d0;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .chinese-text.show {
    display: block;
    opacity: 1;
  }

  /* 长难句相关样式 */
  .difficult-sentence {
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
  }

  .difficult-sentence.highlight {
    background-color: rgba(64, 224, 208, 0.1);
    border-radius: 4px;
    padding: 2px 4px;
  }

  .sentence-analysis {
    display: none;
    background: #f8f9fa;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    border-left: 3px solid #40e0d0;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .sentence-analysis.show {
    display: block;
    opacity: 1;
  }

  .analysis-title {
    color: #40e0d0;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .structure-analysis {
    margin: 10px 0;
    padding: 10px;
    background: #fff;
    border-radius: 6px;
  }

  .translation-result {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
  }

  /* 生词相关样式 */
  .new-word {
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .new-word.highlight {
    background-color: #FFE4B5;
    border-radius: 3px;
    padding: 0 2px;
  }

  .word-tooltip {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-width: 300px;
    z-index: 1000;
    display: none;
  }

  .word-tooltip.show {
    display: block;
  }

  .word-phonetic {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 5px;
  }

  .word-meaning {
    border-top: 1px solid #eee;
    padding-top: 5px;
    margin-top: 5px;
  }

  .word-type {
    color: #40e0d0;
    font-weight: bold;
    margin-right: 5px;
  }

  /* 单词点击相关样式 */
  .word-clickable {
    cursor: pointer;
    padding: 0 2px;
    border-radius: 3px;
    transition: background-color 0.2s;
  }

  .word-clickable:hover {
    background-color: rgba(64, 224, 208, 0.1);
  }

  .word-clickable.highlighted {
    background-color: rgba(64, 224, 208, 0.2);
  }

  .tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .collect-word-btn {
    background: #40e0d0;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    cursor: pointer;
  }

  .collect-word-btn:hover {
    background: #3bcdc0;
  }

  .collect-word-btn.collected {
    background: #999;
  }

  .loading-phonetic,
  .loading-meaning {
    color: #999;
    font-style: italic;
    font-size: 0.9em;
  }

  .english-text {
    cursor: default;
    user-select: text;
    line-height: 1.8;
  }

  /* 让所有英文单词可点击 */
  .english-text span,
  .english-text {
    cursor: pointer;
  }

  .english-text span:hover,
  .english-text:hover {
    background-color: transparent;
  }

  /* 加新的单词样式 */
  .clickable-word {
    cursor: pointer;
    padding: 0 1px;
    border-radius: 2px;
    transition: all 0.2s ease;
  }

  .clickable-word:hover {
    background-color: rgba(64, 224, 208, 0.1);
  }

  /* 确保新单词和预设生词样式一致 */
  .new-word,
  .clickable-word {
    display: inline-block;
  }

  .new-word.highlight {
    background-color: #FFE4B5;
    border-radius: 3px;
    padding: 0 2px;
  }

  /* 修改长难句相关样式 */
  .difficult-sentence {
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block; /* 确保长难句可以正确显示 */
  }

  .difficult-sentence.highlight {
    background-color: rgba(64, 224, 208, 0.1);
    border-radius: 4px;
    padding: 2px 4px;
  }

  /* 确保长难句内的单词不会被分开点击 */
  .difficult-sentence .clickable-word {
    cursor: inherit;
    padding: 0;
    border-radius: 0;
    transition: none;
  }

  .difficult-sentence .clickable-word:hover {
    background-color: transparent;
  }

  .analysis-loading {
    text-align: center;
    padding: 20px;
    color: #666;
  }

  .analysis-error {
    text-align: center;
    padding: 20px;
    color: #ff4444;
  }

  .structure-analysis p {
    margin: 8px 0;
  }

  .structure-analysis ul {
    margin: 8px 0;
    padding-left: 20px;
    list-style-type: disc;
  }

  .structure-analysis li {
    margin: 4px 0;
    color: #666;
  }

  .translation-result p {
    margin: 8px 0;
    line-height: 1.6;
  }

  .translation-result p strong {
    color: #40e0d0;
  }

  .analysis-section {
    margin: 15px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
  }

  .analysis-section strong {
    color: #40e0d0;
    font-size: 1.1em;
  }

  .analysis-value {
    margin-top: 10px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
  }

  .json-item {
    margin: 4px 0;
    padding-left: 16px;
  }

  .json-key {
    color: #0066cc;
    font-weight: 500;
  }

  .json-value {
    margin-left: 8px;
  }

  .json-array {
    margin-left: 16px;
  }

  .json-array-item {
    margin: 4px 0;
    padding-left: 8px;
    border-left: 2px solid #eee;
  }

  .json-primitive {
    color: #444;
  }
  </style>